<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_DOM操作2</title>
</head>
<body>
    <input type="text" id="i1">
    <input type="text" id="i2">
    <button onclick="f1()">按钮1</button>
    <hr>
    <h3>震惊：<span class="s"></span></h3>
    <button onclick="f2()">按钮2</button>
    <script>
        function f2(){
            let spanE = document.querySelector('.s');
            //spanE.innerHTML = '昨日竟然...';
            // spanE.innerHTML = '昨日<mark>竟然</mark>...';
            spanE.innerHTML = '<table border="1px"><tr><td>张三</td><td>30</td><td>男</td></tr></table>';
        }

        function f1(){
            let input1 = document.querySelector('#i1');//根据id选择器获取元素
            let input2 = document.getElementById('i2');//根据id值获取元素
            console.log(input1,input2);
            //我们可以从input的value属性中获取用户输入的值
            //注意：输入框获取的值是字符串类型，直接相加的话是字符串拼接效果，如果需要数字相加，需要先转换类型
            console.log(input1.value+input2.value);
            let i1 = parseFloat(input1.value);
            let i2 = parseFloat(input2.value);
            console.log(i1+i2);
        }
    </script>
</body>
</html>